<template>
  <view class="info">
    <pane-card title="提醒消息" subTitle="最新的消息提醒，请查看..." next="/pages/info/list" badge>
      <view class="icon" slot="icon">
        <m-icon fill type="chat"></m-icon>
      </view>
    </pane-card>
    <pane-card title="超时任务" subTitle="即将超时的任务提醒..." next="/pages/main/remind" badge>
      <view class="icon warning" slot="icon">
        <m-icon fill type="chat"></m-icon>
      </view>
    </pane-card>
  </view>
</template>
<script>
import PaneCard from '@/components/m-card/pane-card.vue';
import MIcon from '@/components/m-icon/m-icon.vue';
export default {
  components: {
    PaneCard,
    MIcon
  },
  methods: {
    goto(url) {
      uni.navigateTo({
        url
      });
    }
  }
};
</script>
<style lang="scss">
.info {
  width: 100%;
  padding: 20rpx 40rpx;
  .icon {
    border-radius: 14rpx;
    background-color: rgba($color: $uni-color-primary, $alpha: 0.1);
    color: $uni-color-primary;
    &.primary {
      background-color: rgba($color: $uni-color-primary, $alpha: 0.1);
      color: $uni-color-primary;
    }

    &.success {
      background-color: rgba($color: $uni-color-success, $alpha: 0.1);
      color: $uni-color-success;
    }

    &.warning {
      background-color: rgba($color: $uni-color-warning, $alpha: 0.1);
      color: $uni-color-warning;
    }

    &.error {
      background-color: rgba($color: $uni-color-error, $alpha: 0.1);
      color: $uni-color-error;
    }
  }
}
</style>
